<template>
  <div class="emailService">
    <newBaseForm :form="formState" ref="getbaseForm">
    </newBaseForm>
    <!-- 模态框 -->
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      @handleOk="buttonMessage" @handleCancle="isVisible = false" class="emailService_modal">
      <template v-slot:body>
        <div>
          <a-form name="advanced_search" class="ant-advanced-search-form" autoComplete="off" :model="formState"
            v-if="isVisible">
            <a-form-item :name="['acceptEmail', 'value']" :label="formState.acceptEmail.label"
              :rules="[formState.acceptEmail.rule]">
              <a-input v-model:value="formState.acceptEmail.value" allow-clear />

            </a-form-item>
          </a-form>
        </div>
      </template>
    </base-modal>
    <!-- baocun -->
    <div class="saveBtn" :style="styleWidth">
      <a-button type="primary" @click="saveSetting" style="margin-right: 24px">
        保存
      </a-button>
      <a-button type="primary" @click="isVisible = true" style="margin-right: 24px">
        邮箱验证
      </a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick, onMounted, } from "vue";
import { cloneDeep } from "lodash";
import newBaseForm from "@/components/form/newBaseForm.vue";
import { emailServiceForm } from './config';
import baseModal from "@/components/modal/baseModal.vue";
import { useFixeWidth, styleWidth } from "@/hooks/useFixeWidth";
import request from "@/api/index";
import { message } from "ant-design-vue";
import rules from "@/utils/rules";
//interface
interface dataSourceType {
  [propName: string]: any;
}
// props
// data
const formState = ref<dataSourceType>(Object.assign(cloneDeep(emailServiceForm)));
formState.value.acceptEmail = {
  value: '',
  rule: {
    required: true,
    validator: rules.email,
    trigger: ["blur"],
    msg1: "请输入邮箱",
    msg2: "邮箱格式不正确",
    api: "",
    key: "siteDomain",
    params: {}, //校验传参
  },
  label: "收件邮箱:",
}

const getbaseForm = ref();
// 模态框数据
const isVisible = ref<boolean>(false);
const modAlProps: any = reactive({
  width: "M",
  title: "数据备份",
});
//模态框button按钮个数和文案修改
const buttons = ref<dataSourceType[]>([
  {
    text: "发送",
    "html-type": "submit",
    keepAlive: true,
  },
]);
//methods
const saveSetting = () => { // 保存数据
  getbaseForm.value.baseForm.validate()
    .then((res: any) => {

    })
  console.log(formState.value, 999123213);
}
const buttonMessage = async (msg: dataSourceType) => {// 发送邮件，检验邮箱是否可用
  let params: dataSourceType = {
    emial: formState.value.value.sendAccount.value,
  };
  request.addacceptEmail(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        isVisible.value = false;
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
//onMounted
onMounted(() => {
  useFixeWidth();
})
</script>
<style lang="less" scoped>
.emailService {
  height: calc(100% - 134px);
  background: #fff;
  overflow-y: auto;

  .hrefTo {
    position: absolute;
    padding-right: 10px;
    top: 64px;
    background: #fff;
    z-index: 1;
    right: 0px;
  }

  .saveBtn {
    position: fixed;
    bottom: 0;
    height: 48px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

}
</style>
<style lang="less">
.emailService_modal {
  .ant-form-item {
    margin-bottom: 0;
  }
}
</style>
